<template>
    <div class="bg">
         <div class="box">
            <!-- 页面上方文字 -->
            <div class="title po">
                <p class="title-p">请拖动选择页面上的框框
                    <span class="blue">（已选择数量：{{amount}}）</span>  
                    <span class="red">（已选择总和：{{sum}}）</span>
                </p>
                <button class="ui-bt por00 matop10" @click="reset()">重置</button>
            </div>
            <!-- 页面中间元素 -->
            <div class="middle">
                <div class="line" v-for="item,index in list" :key="index">
                    <div 
                        class="column"
                        :class="items.color ? 'column-active' : ''" 
                        v-for="items,indexs in item" 
                        :key="items.num"
                        ref="box"
                        @mousedown="mouseDown(indexs,index)"
                        @click="mouseClick(indexs,index)"
                    >{{items.num}}</div>
                </div>
            </div>
         </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            list:[],
            sum:0,  //数字总和
            amount:0,  //已选择数量
            coordinate:{    //开始结束坐标
                startX:-1,
                startY:-1,
                endX:-1,
                endY:-1,
            },

        }
    },
    mounted() {
        // 创建数组
        this.getArr()
    },
    methods: {
        // 创建二维数组
        getArr(){
            for(let i = 0; i < 20; i++){
                let arr = []
                for(let j = 1; j <= 20; j++){
                    let num = i * 20 + j
                    let obj = {
                        num,
                        color:false
                    }
                    arr.push(obj)
                }
                this.list.push(arr)
            }
            // console.log('你好，这是list',this.list);
            
        },

        // 鼠标按下事件
        mouseDown(x,y){
            // console.log(x,y);
            
            let that = this
            // console.log(this.$refs.box[1])
            this.coordinate.startX = x
            this.coordinate.startY = y
            // 鼠标按下时移动鼠标事件（鼠标未抬起）
            document.onmousemove = function (e) {

                let bool = that.numToCoordinate(e.target.innerText)
                if(bool){
                    that.changeColor()
                }
                // 鼠标抬起事件
                document.onmouseup = function (e) {
                    // console.log('onmouseup', e)
                    document.onmousemove=null

                    
                }
            }
        },
        // 鼠标点击事件
        mouseClick(x,y){
            this.coordinate.startX = x
            this.coordinate.startY = y
            this.coordinate.endX = x
            this.coordinate.endY = y
            this.changeColor()
        },

        // 数字拆分成横竖坐标
        numToCoordinate(number){
            let num = number - 1
            let endX = (num % 20)
            let endY = parseInt( num / 20 )
            if(endX == this.coordinate.endX && endY == this.coordinate.endY){
                return false
            }else{
                this.coordinate.endX = endX
                this.coordinate.endY = endY
                return true

            }
        },

        // 更改box颜色
        changeColor(){
            let list = this.list
            let startX = this.coordinate.startX
            let startY = this.coordinate.startY
            let endX = this.coordinate.endX
            let endY = this.coordinate.endY
            // console.log('这是更改颜色的',startX,startY,endX,endY);

            // 如果坐标中有-1（没有开始坐标或者没有结束坐标）
            if(startX < 0 || endX < 0 || startY < 0 || endY < 0){
                return
            }

            // 比较大小并选出大小数字
            let smallX = startX > endX ? endX : startX
            let bigX = startX < endX ? endX : startX
            let smallY = startY > endY ? endY : startY
            let bigY = startY < endY ? endY : startY

            let amount = 0
            let sum = 0
            for(let i = 0; i < list[0].length; i++){
                for(let j = 0; j < list.length; j++){
                    if(i >= smallX && i <= bigX && j >= smallY && j <= bigY){
                        amount++
                        sum += list[j][i].num

                        list[j][i].color = true 
                    }else{
                        list[j][i].color = false
                    }
                }
            }
            this.list = list
            this.sum = sum 
            this.amount = amount
        },

        // 重置
        reset(){
            let data = this.$options.data()
            this.coordinate = data.coordinate
            this.list = []
            this.sum = 0
            this.amount = 0
            this.getArr()
        },

    },
}
</script>

<style scoped lang="less">
.bg{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    font-family: "微软雅黑";
    .box{
        width: 80%;
        height: 80%;
        // background-color: aqua;
        .title{
            .title-p{
                font-size: 20px;
                text-align: center;
                font-weight: bold;
                line-height: 50px;
                margin-top: -25px;
            }
        }
        .middle{
            width: 100%;
            height: 100%;
            border: 1px solid #666;
            .line{
                display: flex;
                height: 5%;
                .column{
                    flex: 1;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border: 1px solid #666;
                    user-select:none;
                    font-family: "JGFONT";
                }
                .column-active{
                    background-color: #666;
                    color: white;
                    border: 1px solid white;
                }
            }
        }
    }
}

.red{
    color: red;
}
.blue{
    color: blue;
}

</style>